//**************************************全局参数***********************************************
//总记录数
let totalRecords;

//当前页
let currentPage;


//***********************************User列表查询*************************************************
//生命周期函数
$(function () {
    //去首页
    to_page(1);

    //注册监听
    listen_add_btn();
    listen_add_confirm_btn();
    listen_name_change();
    listen_edit_btn();
    listen_update_confirm_btn();
    listen_delete_btn();
    listen_batch_delete();
    listen_batch_delete_btn();
});

//页面加载结束后,直接发送ajax请求，请求分页数据
function to_page(pn) {
    $.ajax({
        url: "/user/list",
        data: "pn="+pn,
        type: "GET",
        success: function (result) {
            //解析Json数据
            //1.解析User,动态产生表格
            build_user_table(result);
            //2.解析显示分页信息
            build_page_info(result);
            //3.解析显示分页条
            build_page_nav(result);
        }
    });
}

//解析User,动态产生表格
function build_user_table(result) {

    //清空表格
    $("#user-table tbody").empty();

    let users = result.extend.pageInfo.list;
    $.each(users, function (index, item) {
        let checkBoxTd = $("<td><input type='checkbox' class='check-item'/></td>");
        let userNumberTd = $("<td></td>").append(item.number);
        let userNameTd = $("<td></td>").append(item.name);
        let userGenderTd = $("<td></td>").append(item.gender === "male" ? "男" : "女");
        let userDateTd = $("<td></td>").append(item.date);
        let userMoneyTd = $("<td></td>").append(item.money);

        let editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn")
            .append($("<span></span>").addClass("glyphicon glyphicon-pencil"))
            .append("编辑");
        editBtn.attr("edit-id",item.number);
        let delBtn = $("<button></button>").addClass("btn btn-danger btn-sm delete_btn")
            .append($("<span></span>").addClass("glyphicon glyphicon-trash"))
            .append("删除");
        delBtn.attr("delete-id",item.number);

        let btnTd = $("<td></td>").append(editBtn)
            .append(" ")
            .append(delBtn);

        $("<tr></tr>").append(checkBoxTd)
            .append(userNumberTd)
            .append(userNameTd)
            .append(userGenderTd)
            .append(userDateTd)
            .append(userMoneyTd)
            .append(btnTd)
            .appendTo("#user-table tbody");
    });
}

//解析显示分页信息
function build_page_info(result) {
    //清空分页信息
    $('#page_info_area').empty();

    $('#page_info_area').append("当前第" + result.extend.pageInfo.pageNum + "页," +
        "总共" + result.extend.pageInfo.pages + "页," +
        "总共" + result.extend.pageInfo.total + "条记录");

    //保存总记录数
    totalRecords = result.extend.pageInfo.total;
    //保存当前页
    currentPage = result.extend.pageInfo.pageNum;
}

//解析显示分页条信息
function build_page_nav(result) {
    //清空分页条
    $("#page_nav_area").empty();

    let ul = $("<ul></ul>").addClass("pagination");
    //构建首页和上一页的标签
    let firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href", "#"));
    let prePageLi = $("<li></li>").append($("<a></a>").append("&laquo;"));

    //首页，前一页
    if (result.extend.pageInfo.hasPreviousPage === false)
    {
        firstPageLi.addClass("disabled");
        prePageLi.addClass("disabled");
    }
    else
    {
        //如果有上一页，才绑定单击事件
        //为首页标签添加单击事件
        firstPageLi.click(function () {
            to_page(1);
        });
        //为上一页标签添加单击事件
        prePageLi.click(function () {
            to_page(result.extend.pageInfo.pageNum - 1);
        });
    }


    //末页、下一页
    let nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;"));
    let lastPageLi = $("<li></li>").append($("<a></a>").append("尾页").attr("href", "#"));
    //如果没有下一页，就设置下一页和尾页按钮不可用
    if (result.extend.pageInfo.hasNextPage === false)
    {
        nextPageLi.addClass("disabled");
        lastPageLi.addClass("disabled");
    }
    else
    {
        //如果有下一页，才绑定单击事件
        //为下一页标签添加单击事件
        nextPageLi.click(function () {
            to_page(result.extend.pageInfo.pageNum + 1);
        });
        //为尾页标签添加单击事件
        lastPageLi.click(function () {
            to_page(result.extend.pageInfo.pages);
        });
    }


    //添加首页和前一页到ul标签中
    ul.append(firstPageLi).append(prePageLi);
    //遍历，给ul中添加页码
    $.each(result.extend.pageInfo.navigatepageNums, function (index, item) {
        let numLi = $("<li></li>").append($("<a></a>").append(item));
        //绑定单击事件，点击页码进行跳转
        numLi.click(function () {
            to_page(item);
        })
        //当前页数高亮显示
        if (result.extend.pageInfo.pageNum === item) {
            numLi.addClass("active");
        }
        ul.append(numLi);
    })


    //添加下一页和尾页到ul标签中
    ul.append(nextPageLi).append(lastPageLi);

    //把ul添加到nav标签中
    let navEle = $("<nav></nav>").append(ul).appendTo("#page_nav_area");
}

//***************************************添加User********************************************
//监听添加按钮
function listen_add_btn()
{
    $("#add-user-btn").click(function (){
        //清除之前的数据,样式
        $("#add-user-modal form")[0].reset();
        $("#add-user-modal form").find("*").removeClass("has-error has-success");
        $("#add-user-modal form").find(".help-block").text("");

        $("#add-user-modal").modal({
            backdrop:"static"
        });
    });
}

//form表单验证
function validate_add_from()
{
    $('#name').parent().removeClass("has-error has-success")
    $('#name').next('span').text("");


    let name = $('#name').val();
    let nameRegExp = /(^[a-zA-Z-0-9_-]{1,6}$)/;
    //数据格式校验name
    if(!nameRegExp.test(name))
    {
        // alert("用户名只能是6-16位英文，横线，下划线的组合或3-6位汉字");
        $('#name').parent().addClass('has-error');
        $('#name').next('span').text("用户名只能是1-6位字母、横线、下划线的组合");
        return false;
    }
    else
    {
        $('#name').parent().addClass('has-success');
        $('#name').next('span').text("");
        return true;
    }

    //其他校验敬请期待......

}

function  listen_name_change()
{
    $('#name').parent().removeClass("has-error has-success")
    $('#name').next('span').text("");

    //业务逻辑校验name
    $('#name').change(function (){
        //ajax请求校验是否同名
        let name = this.value;
        $.ajax({
            url: "/user/checkUserName",
            data: "name="+name,
            type: "GET",
            success: function (result){
                if(result.code === 1)
                {
                    $('#name').parent().addClass('has-success');
                    $('#name').next('span').text("用户名可用");

                    //保存校验状态
                    $('#add-user-save').attr("ajax-va","success");
                }
                else
                {
                    $('#name').parent().addClass('has-error');
                    $('#name').next('span').text(result.extend.va_msg);

                    $('#add-user-save').attr("ajax-va","fail");
                }
            }
        });
    });
}

//监听确认添加按钮
function listen_add_confirm_btn()
{
    $('#add-user-save').click(function (){
        //1.提交表单数据到controller,先进行前台数据验证
        if(!validate_add_from())
        {
            return false;
        }

        if($('#add-user-save').attr("ajax-va") === "fail")
        {
            console.log("重名？");
            return false;
        }

        //2.发送ajax请求save User
        $.ajax({
            url: "/user/save",
            type: "POST",
            data: $('#add-modal form').serialize(),
            success: function (result){
                //save 成功后回调函数
                if(result.code === 1)
                {
                    //操作成功
                    //1. 关闭模态框
                    $('#add-user-modal').modal('hide');
                    //2.跳转末页，显示添加结果（发送ajax请求）
                    alert("添加成功!");
                    to_page(totalRecords);
                }
                else
                {
                    //操作失败
                    if(result.extend.errorFields.name !== undefined)
                    {
                        //name后台验证失败
                        $('#name').parent().addClass('has-error');
                        $('#name').next('span').text("用户名只能是1-6位字母、横线、下划线的组合");
                    }
                }

            }
        });
    });
}

//**********************************修改User************************************************
//监听修改User按钮
function listen_edit_btn()
{
    $(document).on("click",".edit_btn",function (){
        //回显User信息
        getUserById($(this).attr("edit-id"));
        //把User的id传递给更新按钮
        $('#update-user-save').attr("edit-id",$(this).attr("edit-id"));
        $("#update-user-modal").modal({
            backdrop:"static"
        });
    });
}

//根据id获取User
function getUserById(number)
{
    $.ajax({
        url: "/user/getUserById/"+number,
        type: "GET",
        success: function (result){
            let user = result.extend.user;
            $('#update-name-static').text(user.name);
            $('#update_password').val(user.password);
            $('#update-user-modal input [name=gender]').val([user.gender]);
            $('#update_date').val(user.date);
            $('#update_money').val(user.money);
        }
    })
}

//监听确认修改按钮
function listen_update_confirm_btn()
{
    $('#update-user-save').click(function (){
        //1. 进行相关数据校验

        //2. 发送ajax请求保存修改后的User
        $.ajax({
            url: "/user/save/"+ $(this).attr("edit-id"),
            type: "PUT",
            data: $('#update-user-modal form').serialize(),
            success: function (){
                //1.关闭模态框
                $('#update-user-modal').modal('hide');
                //2.显示当前页
                alert("修改成功!");
                to_page(currentPage);
            }
        });

    });
}

//************************************删除User***********************************************
//监听删除按钮
function listen_delete_btn()
{
    $(document).on("click",".delete_btn",function (){
        //1. 弹出confirm框
        let name = $(this).parents("tr").find("td:eq(2)").text();
        let number = $(this).attr("delete-id");
        if(confirm("确认删除" + name +"吗？"))
        {
            $.ajax({
                url: "/user/delete/"+ number,
                type: "DELETE",
                success: function (result) {
                    alert("删除成功!");
                    to_page(currentPage);
                }
            });
        }
    });
}

//监听选中checkbox
function listen_batch_delete()
{
    //监听批量选中checkbox
    $('#check-all').click(function (){
        //attr获取checked为undefined,用来获取自定义属性
        //prop获取checked问true,false,用来获取原生DOM属性
        //$(this).prop("checked");
        $('.check-item').prop("checked", $(this).prop("checked"));
    });

    //监听各个item
    $(document).on('click','.check-item',function (){
        //判断当前是否已经选择了所有item
        let flag = $('.check-item:checked').length === $('.check-item').length;
        $('#check-all').prop("checked",flag);
    });
}

//监听批量删除按钮
function listen_batch_delete_btn()
{
    $('#batch-delete-btn').click(function (){
        let names = "";
        let ids = "";
        $.each($('.check-item:checked'),function (){
            names += $(this).parents("tr").find("td:eq(2)").text() + ",";
            //组装ids
            ids += $(this).parents("tr").find("td:eq(1)").text() + ",";
        });
        names = names.substring(0,names.length - 1);
        ids = ids.substring(0,ids.length - 1);
        if(names.length === 0)
        {
            alert("您还没有选择任何用户！");
            return false;
        }
        if(confirm("确认删除"+ names + "吗？"))
        {
            //发送ajax请求
            $.ajax({
               url: "/user/delete/"+ ids,
               type: "DELETE",
               success: function (){
                   alert("删除成功!");
                   //回到当前页
                    to_page(currentPage);
               }
            });
        }
    });
}
